<template>
  <view class="wrapper">
    <template v-for="(item, index) in list">
      <view class="item" v-if="item.balance > 0" :key="index">
        <view class="name">{{ item.award_name }}</view>
        <view class="desc">
          <view class="line">
            <text class="text">订单ID:</text>
            <text class="num">{{ item.order_id }}</text>
          </view>
          <view class="line">
            <text class="text">操作ID:</text>
            <text class="num">{{ item.fans_id }}</text>
          </view>
          <view class="line">
            <text class="text">佣金:</text>
            <text class="num color">{{ item.balance * 1 }}</text>
          </view>
          <view class="line time">
            <text class="text">时间:</text>
            <text class="num">{{ item.create_time }}</text>
          </view>
        </view>
      </view>
    </template>
  </view>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: []
    }
  }
}
</script>

<style scoped lang="scss">
.wrapper {
  .item {
    background: white;
    padding: 20rpx;
    border-radius: 10rpx;
    margin-bottom: 10rpx;
    display: flex;
    .name {
      width: 200rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      color: red;
      font-weight: 700;
    }
    .desc {
      flex: 1;
      .line {
        height: 20px;
        .text {
          margin-right: 10rpx;
        }
        &.time {
          color: #ccc;
        }
        .num {
          &.color {
            color: red;
            font-weight: 700;
          }
        }
      }
    }
  }
}
</style>
